<template>
  <el-timeline :hide-timestamp="hideTimestamp" :reverse="reverse">
    <el-timeline-item
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :dot-color="item.dotColor"
      :hollow="item.hollow"
      :placement="item.placement"
      :size="item.size"
      :timestamp="item.timestamp"
      :type="item.type"
      @click="handleItemClick(item, index)"
    >
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      {{ item.content }}
    </el-timeline-item>
  </el-timeline>
</template>
<script setup lang="ts">
import { ElIcon, ElTimeline, ElTimelineItem } from 'element-plus'
import type { TimelineEvents, TimelineOptions } from './types'

const props = withDefaults(
  defineProps<{
    items: TimelineOptions['items']
    reverse?: boolean
    hideTimestamp?: boolean
  }>(),
  {
    reverse: false,
    hideTimestamp: false,
  }
)
const emit = defineEmits<TimelineEvents>()
const handleItemClick = (item: TimelineOptions['items'][0], index: number) => {
  emit('item-click', item, index)
}
</script>
<style scoped>
.el-timeline {
  width: 100%;
}
</style>
